<template>
    <div class="AdminNavigation_main_css_box">
        <div class="left_css_box">
            <div class="left_top_css_box">
                <div class="left_top_left_css_box">

                </div>
                <div class="left_top_right_css_box">
                    <p style="line-height: 5vh;margin-left: 0.5vw;font-size:1.3vw;color:aliceblue;">谷谷学院管理系统</p>
                </div>
            </div>
            <div class="left_below_css_box">
                <a-menu
                    :style="{ width: '17vw', height: '90vh' }"
                    theme="dark"
                >
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toHomePage" :class="testvalue">数据看板
                        <template #icon><icon-dashboard  ></icon-dashboard></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;"  @click="toTableData">课程管理
                        <template #icon><icon-user /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toHelloWorld">名师管理
                        <template #icon><icon-computer /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toClazz">文章管理
                        <template #icon><icon-tag /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toGrade">用户管理
                        <template #icon><icon-calendar /></template>
                    </a-menu-item>
                    <a-menu-item style="font-size:1.2vw; margin-bottom: 2.5vh;" @click="toPersonalCenter">个人信息管理
                        <template #icon><icon-common /></template>
                    </a-menu-item>
                </a-menu>
            </div>
        </div>
        <div class="right_css_box">
            <div class="right_top_css_box">
                <div class="right_top_left_css_box">
                    <div class="right_top_left_left_css_box">
                        <icon-menu-unfold style="transform: rotate(90deg);width: 6vw;height: 6vh;margin-left: -1vw;margin-top: 1.5vh;" />
                    </div>
                    <div class="right_top_left_right_css_box">
                        <a-breadcrumb style="margin-top: 3vh;margin-left: -3vw;">
                            <a-breadcrumb-item>首页</a-breadcrumb-item>
                            <a-breadcrumb-item>{{ $store.state.PageState}}</a-breadcrumb-item>
                        </a-breadcrumb>
                    </div>
                </div>
                <div class="right_top_right_css_box">
                    <div class="right_top_right_left_css_box">
                        <a-space size="large">
                            <a-avatar :size="64" shape="square" style="margin-top: 0.5vh;margin-left: 0.4vw;"><img :src="adminImage"></a-avatar>
                        </a-space>
                        <b style="color:red" @click="Logout">退出登录</b>
                    </div>
                    <div class="right_top_right_right_css_box">
                        <b style="font-size:1.2vw;line-height: 9vh;">管理员:</b>
                        <a>{{ $store.state.adminname }}</a>
                    </div>
                </div>
            </div>
            <div class="right_below_css_box">
                <div class="right_below_top_css_box">
                    <a-space>
                        <a-tag closable>首页</a-tag>
                        <a-tag closable style="background-color: #66B98E;">{{ $store.state.PageState }}</a-tag>
                    </a-space>
                </div>
                <div class="right_below_content_css_box">
                    <!-- <div class="right_below_content_top_css_box" v-show="$store.state.LaberState">
                        <a-space>
                            <a-button type="primary" style="width: 5vw;height: 5vh;">
                                <template #icon>
                                    <icon-plus />
                                </template>
                                <template #default>添加</template>
                            </a-button>
                            <a-button type="primary" style="width: 6vw;height: 5vh;" status="danger">
                                <template #icon>
                                    <icon-delete />
                                </template>
                                <template #default>批量删除</template>
                            </a-button>
                            <b>班级:</b>
                            <a-select :style="{width:'320px'}" placeholder="请选择" allow-search>
                                <a-option>Beijing</a-option>
                                <a-option>Shanghai</a-option>
                                <a-option>Guangzhou</a-option>
                                <a-option disabled>Disabled</a-option>
                                <a-option>Shenzhen</a-option>
                                <a-option>Chengdu</a-option>
                                <a-option>Wuhan</a-option>
                            </a-select>
                            <b>学生姓名:</b>
                            <a-input :style="{width:'320px'}" placeholder="请输入学生姓名" allow-clear show-word-limit />
                            <a-button type="primary" style="width: 5vw;height: 5vh;">
                                <template #icon>
                                    <icon-search />
                                </template>
                                <template #default>搜索</template>
                            </a-button>
                            <a-button type="primary" style="width: 5vw;height: 5vh; background-color: #919398;">
                                <template #icon>
                                    <icon-command />
                                </template>
                                <template #default>重置</template>
                            </a-button>
                        </a-space>
                    </div> -->
                    <div class="right_below_content_below_css_box">
                        <router-view />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { IconPlus, IconDelete } from '@arco-design/web-vue/es/icon';
import axios from 'axios'
    export default {
        name:'AdminNavigation',
        data(){
            return{
                adminImage:'',
                testvalue:'testcss'
            }
        },
        mounted(){
            var that=this
            axios.get('http://127.0.0.1/getAdminImage',{params:{
                userName:that.$store.state.adminname 
            }}).then(function(res){
                console.log(res.data)
                that.adminImage=res.data
            }).catch(function(error){
                console.log(error)
            })
        },
        methods:{
            Logout(){
                var that=this
                alert("退出成功")
                that.$store.commit("UpLoginState",false)
                that.$store.commit('updateAdminName','未知')
                that.$router.push('/')
            },
            toTableData(){
                this.$router.push('/AdminNavigation/DataTable')
                this.$store.state.PageState="课程管理"
                this.$store.state.LaberState=true
            },
            toHelloWorld(){
                this.$router.push('/AdminNavigation/TeacherTable')
                this.$store.state.PageState="名师管理"
                this.$store.state.LaberState=true
            },
            toAdmin(){
                this.$router.push('/AdminNavigation/AdminTable')
                this.$store.state.PageState="文章管理"
                this.$store.state.LaberState=true
            },
            toClazz(){
                this.$router.push('/AdminNavigation/ClazzTable')
                this.$store.state.PageState="文章管理"
                this.$store.state.LaberState=true
            },
            toGrade(){
                this.$router.push('/AdminNavigation/GradeTable')
                this.$store.state.PageState="用户管理"
                this.$store.state.LaberState=true
            },
            toHomePage(){
                this.$router.push('/AdminNavigation/HomePage')
                this.$store.state.PageState="首页"
                this.$store.state.LaberState=false
            },
            toPersonalCenter(){
                this.$router.push('/AdminNavigation/PersonalCenter')
                this.$store.state.PageState="个人信息管理"
                this.$store.state.LaberState=false
            }
        },
        components:{
            IconPlus, 
            IconDelete,
        }
    }
</script>
<style>
    .AdminNavigation_main_css_box{
        width: 100vw;
        height: 100vh;
    }
    .left_css_box{
        float: left;
        width: 17%;
        height: 100%;
        background-color:#353535;
    }
    .left_top_css_box{
        width:100%;
        height: 10%;
    }
    .left_top_left_css_box{
        float: left;
        width:25%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 80% 75%;
        background-image: url('../assets/logos.png');
    }
    .left_top_right_css_box{
        float: left;
        width:75%;
        height: 100%;
    }
    .left_below_css_box{
        width:100%;
        height: 90%;
    }
    .right_css_box{
        float: left;
        width: 83%;
        height: 100%;
    }
    .right_top_css_box{
        width: 100%;
        height: 10%;
    }
    .right_top_left_css_box{
        float: left;
        width:20%;
        height:100%;
    }
    .right_top_left_left_css_box{
        float: left;
        width:30%;
        height:100%;
    }
    .right_top_left_right_css_box{
        float: right;
        width:60%;
        height:100%;
    }
    .right_top_right_css_box{
        float:right;
        width:20%;
        height:100%;
    }
    .right_top_right_left_css_box{
        float: right;
        width:30%;
        height: 100%;
    }
    .right_top_right_right_css_box{
        float:right;
        width: 70%;
        height: 100%;
    }
    .right_below_css_box{
        width:100%;
        height: 90%;
    }
    .right_below_top_css_box{
        width:100%;
        height: 4%;
    }
    .right_below_content_css_box{
        width: 100%;
        height: 91%;
    }
    .right_below_below_css_box{
        width:100%;
        height: 5%;
    }
    .right_below_content_top_css_box{
        width:100%;
        height: 7%;
    }
    .right_below_content_below_css_box{
        width: 100%;
        height: 93%;
    }
    .testcss{
        color:aliceblue;
    }
    .testNewcss{
        color:blue;
    }
</style>  